<template>
  <!-- 评论组件 -->
  <div class="comment" v-if="!isphone">
    <!-- 评论大盒子 -->
    <div class="comment_box">
      <h3>{{ this.count }}条评论</h3>
      <!-- 单数评论 -->
      <div class="comment_list">
        <!-- 评论图片 -->
        <div class="comment_thumb">
          <img src="../../assets/images/about-person1.jpg" alt="" />
        </div>
        <!-- 评论内容 -->
        <div class="comment_content">
          <h5>{{ this.email }}</h5>
          <span>2018 年 10 月 16 日凌晨 1 点 38 分</span>
          <p>但我必须向你解释穗喜欢狗叫</p>
          <button class="comment_reply">
            <a href="">回复</a>
          </button>
        </div>
      </div>
      <!-- 双数评论 -->
      <div class="comment_list list_two">
        <!-- 评论图片 -->
        <div class="comment_thumb">
          <img src="../../assets/images/about-person1.jpg" alt="" />
        </div>
        <!-- 评论内容 -->
        <div class="comment_content">
          <h5>{{ this.email }}</h5>
          <span>2018 年 10 月 16 日凌晨 1 点 38 分</span>
          <p>但我必须向你解释穗喜欢狗叫</p>
          <button class="comment_reply">
            <a href="">回复</a>
          </button>
        </div>
      </div>
      <!-- 单数评论 -->
      <div class="comment_list">
        <!-- 评论图片 -->
        <div class="comment_thumb">
          <img src="../../assets/images/about-person1.jpg" alt="" />
        </div>
        <!-- 评论内容 -->
        <div class="comment_content">
          <h5>{{ this.email }}</h5>
          <span>2018 年 10 月 16 日凌晨 1 点 38 分</span>
          <p>但我必须向你解释穗喜欢狗叫</p>
          <button class="comment_reply">
            <a href="">回复</a>
          </button>
        </div>
      </div>
      <!-- 双数评论 -->
      <div class="comment_list list_two">
        <!-- 评论图片 -->
        <div class="comment_thumb">
          <img src="../../assets/images/about-person1.jpg" alt="" />
        </div>
        <!-- 评论内容 -->
        <div class="comment_content">
          <h5>{{ this.email }}</h5>
          <span>2018 年 10 月 16 日凌晨 1 点 38 分</span>
          <p>但我必须向你解释穗喜欢狗叫</p>
          <button class="comment_reply">
            <a href="">回复</a>
          </button>
        </div>
      </div>
    </div>
    <!-- 发表评论 -->
    <div class="comment_form">
      <h3>发表评论</h3>
      <p>您的电子邮件地址不会被公开。必需的地方已做标记 *</p>
      <from>
        <div class="row">
          <div class="row_1">
            <div class="row_title">评论</div>
            <div class="box"></div>
          </div>
          <div class="row_2">
            <div class="row_title">姓名</div>
            <input type="text" />
          </div>
          <div class="row_2">
            <div class="row_title">电子邮件</div>
            <input type="text" />
          </div>
          <div class="row_2">
            <div class="row_title">网站</div>
            <input type="text" />
          </div>
        </div>
      </from>
    </div>
    <div class="comment_post">
      <button>
        <a href="">发表评论</a>
      </button>
    </div>
    <p v-if="loading">加载中...</p>
    <p v-if="noMore">没有更多了</p>
  </div>
  <div class="phone-home" v-else>
    <div class="commentbox">
      <van-field
        v-model="message"
        rows="2"
        autosize
        label="评论"
        type="textarea"
        maxlength="50"
        placeholder="请输入评论"
        show-word-limit
      />
      <button @click="pushcmt()">发表评论</button>
    </div>
    <div class="cmtlist">
      <ul>
        <li v-for="item in commentlist" :key="item.id">
          <div class="headinfo">
            <div class="headpic"><img :src="item.img" alt="" /></div>
            <div class="username">
              <h2>{{ item.email }}</h2>
              <span>发表时间{{ item.datetime | formatDate }}</span>
            </div>
          </div>
          <div class="cmtcnt">
            <p>
              {{ item.content }}
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import {
  getComment,
  pushblogcomment,
  getGoodsComment,
  pushcomment,
} from '@/api';
import { Toast } from 'vant';

export default {
  data() {
    return {
      count: 10,
      loading: false,
      email: '穗',
      message: '',
      commentlist: [],
    };
  },
  computed: {
    noMore() {
      return this.count >= 20;
    },
    disabled() {
      return this.loading || this.noMore;
    },
    ...mapState('media', ['isphone']),
  },
  methods: {
    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 2;
        this.loading = false;
      }, 2000);
    },
    pushcmt() {
      if (sessionStorage.getItem('email') == undefined) {
        Toast({
          message: '请登录后在发表评论',
          position: 'bottom',
        });
        return;
      }
      if (this.message == '' || this.message == undefined) {
        return;
      }
      if (this.$route.path.includes('blogcontent')) {
        pushblogcomment({
          content: this.message,
          email: sessionStorage.getItem('email'),
        }).then((res) => {
          console.log(res);
        });
        this.commentlist.unshift({
          email: sessionStorage.getItem('email'),
          datetime: Date.now(),
          img: 'http://api.btstu.cn/sjtx/api.php?lx=b1&format=images',
          content: this.message,
        });
      } else {
        pushcomment({
          content: this.message,
          email: sessionStorage.getItem('email'),
        });
        this.commentlist.unshift({
          email: sessionStorage.getItem('email'),
          datetime: Date.now(),
          img: 'https://img2.baidu.com/it/u=1367512152,228915312&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1657213200&t=b993bf5a6be1e5b2ec09cdc7a105bbe9',
          content: this.message,
        });
      }
    },
  },
  created() {
    if (this.$route.path.includes('/blogcontent')) {
      getComment().then((res) => {
        console.log(res);
        this.commentlist = res.data.data;
      });
    } else {
      getGoodsComment().then((res) => {
        console.log(res);
        this.commentlist = res.data.data;
      });
    }
  },
};
</script>

<style lang="scss" scoped>
// 评论组件
.comment {
  margin-top: 20px;

  // 评论大盒子
  .comment_box {
    margin-bottom: 54px;

    h3 {
      font-size: 20px;
      margin: 0 0 20px;
      font-weight: 500;
      line-height: 28px;
    }

    // 单数评论
    .comment_list {
      font-size: 15px;
      overflow: hidden;
      margin-bottom: 30px;

      // 评论图片
      .comment_thumb {
        display: inline-block;
        float: left;
        width: 70px;
        height: 70px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      // 评论内容
      .comment_content {
        margin-left: 100px;
        position: relative;
        border: 1px solid #ebebeb;
        border-radius: 3px;
        padding: 15px;

        h5 {
          font-size: 16px;
          font-weight: 500;
          text-transform: uppercase;
          margin-bottom: 5px;
        }

        span {
          line-height: 18px;
          margin-bottom: 8px;
          font-size: 13px;
          font-style: italic;
          display: inline-block;
        }

        p {
          margin-bottom: 0;
          font-size: 14px;
        }

        .comment_reply {
          position: absolute;
          background-color: rgb(0, 0, 0);
          top: 40px;
          right: 20px;
          width: 60px;
          height: 30px;
          text-align: center;
          border-radius: 3px;

          a {
            color: #fff;
          }
        }
      }
    }

    // 双数评论
    .list_two {
      padding-left: 50px;
    }
  }

  // 发表评论
  .comment_form {
    h3 {
      font-size: 20px;
      margin: 0 0 20px;
      font-weight: 500;
      line-height: 28px;
    }

    p {
      font-size: 14px;
      line-height: 17px;
      margin-bottom: 12px;
    }

    .row {
      --bs-gutter-x: 1.5rem;
      --bs-gutter-y: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .row_1 {
        flex: 0 0 auto;
        width: 100%;

        .row_title {
          font-size: 14px;
          line-height: 20px;
          font-weight: 500;
          margin-bottom: 10px;
        }

        .box {
          width: 100%;
          height: 200px;
          background: #ffffff;
          border: 1px solid #ebebeb;
          margin-bottom: 10px;
          resize: none;
          padding: 10px;
        }
      }

      .row_2 {
        flex: 0 0 auto;
        width: 30%;

        .row_title {
          font-size: 16px;
          margin-bottom: 8px;
        }

        input {
          width: 100%;
          height: 40px;
          border: 1px solid #ebebeb;
          margin-bottom: 15px;
          padding: 0 20px;
        }
      }
    }
  }

  // 提交评论
  .comment_post {
    margin-bottom: 20px;

    button {
      background-color: black;
      width: 100px;
      height: 40px;
      border-radius: 4px;

      a {
        color: #fff;
      }
    }
  }
}
.phone-home {
  .commentbox {
    margin-top: 10px;
    padding: 10px;
    height: 150px;
    width: 100%;
    display: flex;
    flex-direction: column;

    button {
      width: 100%;
      height: 50px;
      background: #0063d1;
      color: white;
      font-size: 16px;
      border-radius: 10px;
    }
  }
  .cmtlist {
    margin-top: 10px;
    width: 100%;
    ul {
      padding: 0 10px;
      li:nth-child(2n + 1) {
        background-color: #eeeded;
      }
      li {
        background-color: #eeeded;
        margin-top: 10px;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        border-radius: 5px;
        overflow: hidden;
        .headinfo {
          display: flex;
          align-items: center;
          padding-left: 10px;
          .headpic {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background: white;
            overflow: hidden;
            img {
              width: 100%;
            }
          }
          .username {
            margin-left: 15px;
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            flex-direction: column;
            color: black;
            h2 {
              font-size: 14px;
            }
            span {
              font-size: 12px;
            }
          }
        }
        .cmtcnt {
          margin-top: 10px;
          width: 100%;
          height: 35px;
          p {
            text-indent: 55px;
            color: black;
            font-size: 14px;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>
